<template>

  <div class="icongroup" :style="'padding:' +data.padding.top/2+'px '+data.padding.lr/2+'px '+data.padding.bottom/2+'px '">
    <ul class="bg" :style="'background:'+data.bgcolor+';border-radius:'+ data.radius.top/2+'px '+ data.radius.top/2+'px '+ data.radius.bottom/2+'px '+ data.radius.bottom/2+'px '">
      <li class="icon-item" :style="'width:'+100/data.num+'%;'" v-for="(item,i) in data.list" :key='i'>
        <div class="icon-box"><i :class="'custom-icon iconfont '+item.icon" :style="'color:'+data.iconcolor"></i>
        </div>
        <p class="title" :style="'color:'+data.textcolor"> {{item.text}} </p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
   props: {
     data: {
       type: Object,
       default: {}
     }
   },
  }
</script>

<style lang="scss" scoped>
  .icongroup {
    .bg {
      display: flex;
      flex-wrap: wrap;

      .icon-item {
        display: flex;
        flex-direction: column;
        height: 85px;

        .icon-box {
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          position: relative;
          padding: 16px 0 8px;
          .custom-icon{
              font-size: 28px;
              height: 28px;
              line-height: 28px;
              display: flex;
              flex-direction: column;
          }
        }
        .title{
            text-align: center;
            margin: 0 auto;
            font-size: 12px;
            line-height: 17px;
        }
      }
    }
  }
</style>
